<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-20 22:18
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="x-custom-container">
    <x-render-draggable
      active
      :current-id="xDesignForm.currentId"
      :form-data="xRenderForm.formData"
      :list="children"
      :component="xDesignForm.getComponent"
      @add="designAddHandler($event, children)"
      @end="designMoveEndHandler($event, children)"
      @copy="designCopyHandler"
      @remove="designRemoveHandler"
      @selected="designSelectedHandler"
      @data-change="dataChangeHandler"
    >
    </x-render-draggable>
  </div>
</template>

<script>
import { XRenderComponentMixin, XRenderDesignMixin, DESIGN_COMPONENT_SUFFIX } from '../../../src/index'
import { cloneDeep } from 'lodash'
import {getFormOption} from '../../../src/libs/utils'

export default {
  name: 'XRenderCustomContainer' + DESIGN_COMPONENT_SUFFIX,
  mixins: [XRenderComponentMixin, XRenderDesignMixin],
  computed: {
    children: {
      get() {
        const { attrs } = this
        // 数据格式
        // attrs: {
        //  children:[ { children:[] } ]
        // }
        return attrs.children[0].children || []
      }
    }
  },
  methods: {
    dataChangeHandler(list) {
      const { attrs, xDesignForm, id, isDebug } = this
      const formOption = getFormOption(xDesignForm.formOptions, id)
      if (!formOption) {
        isDebug ? console.warn('未找到表单项') : ''
        return
      }
      // 数据格式
      // attrs: {
      //  children:[ { children:[] } ]
      // }
      const attrsTmp = cloneDeep(attrs)
      // 外层children
      attrsTmp.children = attrsTmp.children || []
      //  第一个child
      const child = attrsTmp.children[0] || {}
      child.children = child.children || []
      child.children.splice(0, child.children.length, ...list)
      // 只有一个数据，只进行添加一个child
      attrsTmp.children.splice(0, 1, child)
      this.$set(formOption, 'attrs', attrsTmp)
    }
  }
}
</script>

<style scoped lang="css">
.x-custom-container {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-flow: column nowrap;
  background-color: #fff;
}

</style>
